<template>
  <div class="course_content">
    <!-- 头部tabBar -->
    <van-nav-bar title="课程详情" left-arrow @click-left="$router.back()">
      <template #right>
        <!-- 右边插槽 -->
        <van-cell> </van-cell>
        <van-popup v-model="show">
          <img class="img" src="../assets/22.jpg" alt />
        </van-popup>
      </template>
    </van-nav-bar>

    <!-- 内容 -->

    <div class="content">
      <div class="content_box">
        <div class="title">
          <span class="title_font">{{ info.title }}</span>
        </div>
        <p></p>
        <p class="gray">
          共{{ info.is_free }}课时 | {{ info.sales_num }}人报名
        </p>
      </div>

      <div class="tacher_list">
        <div class="title_font">教学团队</div>
        <ul>
          <li v-for="ele in tachers" :key="ele.id">
            <img :src="ele.teacher_avatar" alt />
            <p>{{ ele.teacher_name }}</p>
          </li>
        </ul>
      </div>
      <div class="tacher_list">
        <div class="title_font">课程介绍</div>
        <span v-html="info.course_details"></span>
      </div>
      <div class="tacher_list">
        <div class="title_font">课程大纲</div>
        <span v-html="info.course_details"></span>
      </div>
      <van-button
        v-if="study_bao == 0"
        type="info"
        color="orange"
        @click="baoming"
        >立即报名</van-button
      >
      <van-button
        v-else
        type="info"
        color="orangered"
        @click="$router.push('/my_study')"
        >开始学习</van-button
      >
    </div>

    <div id="com" class="cd_comment">
      <p class="title_font">课程评论</p>
      <img src="http://xl.9yuecloud.com/assets/img/empty.0d284c2e.png" alt="" />
    </div>
  </div>
</template>

<script>
import { course_detail, apply_study } from "../request/http.js";
export default {
  name: "Coursedet",
  data() {
    return {
      collect: "0",
      params: {
        basis_id: 0,
      },
      show: false,
      info: {},
      tachers: [],
      courseId: "",
      study_bao: 0,
    };
  },
  methods: {
    baoming() {
      apply_study({ shop_id: this.info.id, type: 2 }).then((res) => {
        console.log(res);
      });
    },
    // 请求函数
    getData() {
      course_detail(this.params).then((res) => {
        console.log(res);
        this.info = res.data.data.info; //基本数据
        this.courseId = res.data.data.info.collect_id;
        this.collect = res.data.data.info.is_collect;
        this.tachers = res.data.data.teachers; //老师数据

        this.study_bao = res.data.data.info.is_join_study;
        console.log(this.study_bao);
      });
    },
  },
  created() {
    // 初始化id
    this.params.basis_id = this.$route.query.id;
    // 调用请求书的函数
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.course_content {
  width: 100%;
  height: 100%;
  background-color: #f0f1f3;
  .content {
    overflow: auto;
  }
  .tacher_list {
    padding: 15px;
    margin-top: 10px;
    background-color: white;
  }
}
.van-tag {
  margin-right: 10px;
}
.red {
  color: red;
  margin-left: 10px;
}
.gray {
  color: gray;
  line-height: 28px;
}
.img {
  width: 200px;
}
.van-cell {
  padding: 10px;
}
.content_box {
  background-color: white;
  padding: 0 15px 15px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .small {
    color: rgb(255, 81, 0);
    font-size: 18px;
    font-weight: 300;
  }
  span {
    font-size: 14px;
    line-height: 30px;
  }
}
.course_content .title_font {
  font-size: 18px;
  line-height: 35px;
}
.tacher_list ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  li {
    width: 20%;
    img {
      height: 50px;
      width: 50px;
      display: block;
      margin: auto;
      border-radius: 50px;
    }
    p {
      line-height: 35px;
      text-align: center;
    }
  }
}
.van-button {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  // color: orangered;
}
.cd_comment {
  font-size: 12px;
  width: 100%;
  height: 4.8rem;
  background: #fff;
  text-align: center;
  margin-bottom: 1.6rem;
  p {
    text-align: left;
    padding-left: 0.267rem;
    padding-top: 0.267rem;
    font-size: 0.427rem;
  }
  img {
    width: 2.4rem;
    height: 2.667rem;
  }
}
</style>